<script setup lang="ts">
import { computed, onMounted, ref, shallowRef } from 'vue'
import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'

import defaults from './default-chart-option'

import type { EducationInfo } from '../type'

defineOptions({
  name: 'ItemThree',
})

const props = defineProps<{
  data: EducationInfo
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string }[]>([])
const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      ...defaults.tooltip,
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: '60%',
      top: 'center',
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        fontSize: 12,
        lineHeight: 24,
      },
      data: data.value.map((v) => {
        return {
          name: v.name,
          icon: 'circle',
          itemStyle: {
            opacity: 1,
          },
        }
      }),
      formatter: (name: string) => {
        return `${name} （${data.value[data.value.findIndex(v => v.name === name)].value}人）`
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['75%', '79%'],
        center: ['30%', '50%'],
        data: [
          { value: 100, name: 'a' },
          { value: 100, name: 'b' },
          { value: 100, name: 'c' },
          { value: 100, name: 'd' },
        ],
        padAngle: 3,
        startAngle: 45,
        avoidLabelOverlap: false,
        label: { show: false },
        itemStyle: {
          borderRadius: 4,
          opacity: 0.1,
          color: '#fff',
        },
        tooltip: { show: false },
      },
      {
        type: 'pie',
        radius: ['50%', '66%'],
        center: ['30%', '50%'],
        color: ['#2E89FA', '#E7971F', '#17E0F8', '#F9C824'],
        data: data.value,
        padAngle: 3,
        label: { show: false },
        itemStyle: {
          borderRadius: 4,
          opacity: 0.2,
        },
        tooltip: { show: false },
      },
      {
        type: 'pie',
        radius: ['60%', '66%'],
        center: ['30%', '50%'],
        data: data.value,
        padAngle: 3,
        label: { show: false },
        zlevel: 12,
        itemStyle: {
          borderRadius: 4,
          opacity: 1,
        },
      },
    ],
  }
})

const show = ref(false)

onMounted(() => {
  data.value = Object.keys(props.data).map((v) => {
    return {
      name: v,
      value: props.data[v],
    }
  })
  setOption(option.value)
  setTimeout(() => {
    show.value = true
  }, 500)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="人员学历结构" />
    <div class="block-body h-70 w-full flex flex-auto flex-wrap">
      <div class="relative h-full w-full overflow-hidden">
        <div ref="chartRef" style="width:100%;height:100%;" />
        <Transition
          enter-active-class="animate__animated animate__fadeIn animate__delay-2s"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <div v-if="show" class="inner-circle flex items-center justify-center">
            <img src="./item-three-inner-circle-icon.png" class="h-18 w-18">
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.inner-circle {
  position: absolute;
  top: 50%;
  left: calc(30% - 12%);
  transform: translateY(-50%);
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(16, 53, 104, 0.4);
  box-shadow: inset 0 0 6px 1px rgba(46, 137, 250, 0.9);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
